<template>
    <edu-dialog
        title="添加课程"
        width="70%"
        :visible.sync="show"
        ref="eduDialog"
        :showButtons="true"
        v-on="{confirm:confirm,close: closeFn}"
    >
        <div class="edu-page-warp">
            <condition-card @reset="reset" @search="searchData" class="course-card">
                <!--事件-->
                <el-row :gutter="24">
                    <el-col :span="8">
                        <el-form-item :label="$t('minor.course.beginCollege')">
                            <DictSelect
                                filterable
                                v-model="queryParams.collegeId"
                                :data="options.college"
                                style="width:80%;"
                            ></DictSelect>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="课程代码">
                            <el-input
                                placeholder="请输入课程代码, 多条请用英文逗号分隔"
                                prefix-icon="el-icon-search"
                                v-model="queryParams.keyWord"
                                style="width:290px;"
                                @change="searchData"
                            />
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="8">
                        <el-form-item :label="$t('label.trainingLevel')">
                            <DictSelect
                                v-model="queryParams.trainingLevel"
                                :data="options.trainingLevel"
                                style="width:80%;"
                            ></DictSelect>
                        </el-form-item>
                    </el-col> -->
                    <!-- <el-col :span="8">
                        <el-form-item :label="$t('课程列表')">
                            <el-input
                                :placeholder="$t('minor.course.inputPlaceholder')"
                                prefix-icon="el-icon-search"
                                v-model="queryParams.keyWord"
                                style="width:240px;"
                                @change="searchData"
                                @keyup.enter.native="searchData"
                            ></el-input>
                        </el-form-item>
                    </el-col> -->
                </el-row>
            </condition-card>
            <!-- <div class="edu-page-title">添加默认值</div> -->
            <div class="btn-container">
                <el-row style="width:70%;padding:0 16px">
                    <div class="condition-title">添加默认值</div>
                    <el-col style="padding-left:20px">
                        <el-form
                            :model="queryParams"
                            size="mini"
                            label-position="right"
                            label-width="65px"
                        >
                            <el-row>
                                <el-col :span="10">
                                    <el-form-item label="考核方式:">
                                        <el-radio v-model="examMode" label="0">考试</el-radio>
                                        <el-radio v-model="examMode" label="1" style="margin-left:8px;" >考查</el-radio>
                                    </el-form-item>
                                </el-col>
                                <!-- <el-col :span="8">
                                    <el-form-item label="课程区分:">
                                        <el-radio v-model="weeksType" label="0">教学周</el-radio>
                                        <el-radio
                                            v-model="weeksType"
                                            label="1"
                                            style="margin-left:8px;"
                                        >实践周</el-radio>
                                    </el-form-item>
                                </el-col> -->
                                <el-col :span="10" :offset="1">
                                    <el-form-item label="是否必修:">
                                        <el-radio v-model="compulsory" label="1">是</el-radio>
                                        <el-radio v-model="compulsory" label="0" style="margin-left:8px;" >否</el-radio>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </el-col>
                </el-row>
                <div>
                    <span class="title-left">*已选择{{selectCount}}门课程</span>
                    <el-button type="primary" @click="clearSelect">清除选择</el-button>
                </div>
            </div>
            <edu-table
                ref="eduTable"
                :selection="true"
                @page-change="pageChange"
                @selection-change="selectionChange"
                :data="tableData"
                :total="total"
                :pageSize="pageSize"
                :pageNum="pageNum"
            >
                <el-table-column :label="$t('minor.course.courseCode')" show-overflow-tooltip>
                    <template slot-scope="scope">{{scope.row.courseCode}}</template>
                </el-table-column>
                <el-table-column label="课程名称" show-overflow-tooltip>
                    <template slot-scope="scope">{{scope.row.courseNameCn}}</template>
                </el-table-column>
                <el-table-column label="课程英文名称" show-overflow-tooltip>
                    <template slot-scope="scope">{{scope.row.courseNameEn}}</template>
                </el-table-column>
                <el-table-column :label="$t('course.college')" show-overflow-tooltip>
                    <template slot-scope="scope">{{scope.row.collegeName}}</template>
                </el-table-column>
                <el-table-column label="考核方式" width="90">
                    <template slot-scope="props">
                        <el-select v-model="props.row.examMode">
                            <el-option key="0" label="考试" value="0"></el-option>
                            <el-option key="1" label="考查" value="1"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="是否必修" width="90">
                    <template slot-scope="props">
                        <el-select v-model="props.row.compulsory">
                            <el-option key="1" label="是" value="1"></el-option>
                            <el-option key="0" label="否" value="0"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('minor.course.credit')" width="80">
                    <template slot-scope="scope">{{scope.row.credits}}</template>
                </el-table-column>
                <el-table-column :label="$t('minor.course.period')" width="80">
                    <template slot-scope="scope">{{scope.row.period}}</template>
                </el-table-column>
                <!-- <el-table-column :label="$t('minor.course.weeks')" show-overflow-tooltip>
                    <template slot-scope="scope">{{scope.row.weeks}}</template>
                </el-table-column>
                <el-table-column :label="$t('minor.course.weekSchoolHour')" show-overflow-tooltip>
                    <template slot-scope="scope">{{scope.row.weekSchoolHour}}</template>
                </el-table-column> -->
                <!-- <el-table-column label="课程区分" width="90">
                    <template slot-scope="props">
                        <el-select v-model="props.row.weeksType">
                            <el-option key="0" label="教学周" value="0"></el-option>
                            <el-option key="1" label="实践周" value="1"></el-option>
                        </el-select>
                    </template>
                </el-table-column> -->
                
            </edu-table>
        </div>
    </edu-dialog>
</template>

<script>
import { queryCourseList,findDept } from "common/src/api/minor/minorCourseManager";
import { addCourse } from "common/src/api/minor/minorCulturePlanManager";
import UTILS from "common/src/utils/utils";
import { queryDic } from "common/src/api/dictionary";
import { getValue } from "common/src/api/commonParam";
export default {
    name: "AddCourse",
    props: {
        show: {
            type: Boolean,
            default: false
        },
        params: {
            default: {},
            type: Object
        },
        advancedType:{
            default: '',
            type: String
        }
    },
    created() {
        this.initCourseList();
        this.initFaculty();
    },
    data() {
        return {
            tableData: [],
            total: 0,
            selectCount: 0,
            options: {
                examMode: [
                    { label: "考试", value: 0 },
                    { label: "考查", value: 1 }
                ],
                college: [],
                compulsorys: [
                    { label: "是", value: 1 },
                    { label: "否", value: 0 }
                ],
                trainingLevel: [],
                college: []
            },
            queryParams: {
                collegeId: "",
                trainingLevel: "",
                keyWord: ""
            },
            oldQueryParams: {},
            pageNum: 1,
            pageSize: 20,
            selectionList: [],
            examMode: "1",
            // weeksType: "0",
            compulsory: "1"
        };
    },
    methods: {
        resetQuery() {
            this.queryParams = {
                collegeId: "",
                trainingLevel: "",
                keyWord: ""
            };
            this.oldQueryParams = Object.assign({}, this.queryParams);
        },
        closeFn() {
            this.resetQuery();
            this.$emit('update:show', false);
        },
        reset() {
            this.pageSize = 20;
            this.resetQuery();
            this.searchData();
        },
        searchData() {
            this.pageNum = 1;
            this.oldQueryParams = Object.assign({}, this.queryParams);
            this.initCourseList();
        },
        openDialog() {
            this.$refs.eduDialog.open();
        },
        getOptions() {
            //筛选条件字典查询
            let data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["X_PYCC"]
            };
            queryDic(data).then(res => {
                this.options.trainingLevel = [];
                UTILS.fillSelect(
                    {
                        trainingLevel: "X_PYCC"
                    },
                    res.data,
                    this.options
                );
            });
        },
        initFaculty(){
             findDept().then(res => {
                 this.options.college = [];
                 if(res.code == 200){
                     for (let key = 0; key < res.data.length; key++) {
                         this.options["college"].push({
                            value: res.data[key].deptCode,
                            label: res.data[key].deptName
                         });
                     }
                 }
             });
        },
        initCourseList() {
            let params = {
                page: this.pageNum,
                pageSize: this.pageSize
            };
            params = Object.assign({}, params, this.oldQueryParams);
            queryCourseList(params).then(res => {
                if (res.code === 200) {
                    // this.tableData = res.data.list;
                    // this.total = res.data.total_;
                    res.data.list.forEach(row => {
                            row.examMode = this.examMode;
                            row.compulsory = this.compulsory;
                            // row.weeksType = this.weeksType;
                        });
                    this.tableData = res.data.list;
                    this.total = res.data.total_;
                }
            })
            .catch(e => {
                this.$message({
                    type: "error",
                    message: "查询课程列表失败"
                });
            });
        },
        pageChange({ pageSize, pageNum }) {
            if (this.pageSize != pageSize) {
                this.pageSize = pageSize;
                this.pageNum = 1;
            } else {
                this.pageNum = pageNum;
            }
            this.initCourseList();
        },
        search() {
            this.initCourseList();
        },
        selectionChange(val) {
            this.selectionList = val;
            this.selectCount = val.length;
        },
        clearSelect() {
            this.$refs.eduTable.clearSelection();
        },
        confirm() {
            if (this.selectionList.length === 0) {
                this.$message({
                    type: "warning",
                    message: "请选择一门课程"
                });
                return;
            }
            let courseCodes = this.selectionList.map(el => {
                return el.courseCode;
            });
            let selectionList = this.selectionList.map(el => {
                return {"courseCode":el.courseCode,"examMode":el.examMode,"compulsory":el.compulsory, advancedType: this.advancedType, changeStatus: '1'};
            });
            let params = Object.assign({}, { courseCodes,selectionList }, this.params);
            addCourse(params).then(({ code, data }) => {
                if (code == 200) {
                    this.tableData.list = [];
                    this.tableData.total_ = 0;
                    this.$refs.eduDialog.close();
                    this.$emit("init");
                }
            });
        },
        updateCourses(type, value) {
            if (!type || !value) return;
            this.tableData.forEach(row => {
                row[type] = value;
            });
        }
    },
    watch: {
        examMode(n, o) {
            if (n) {
                this.updateCourses("examMode", n);
            }
        },
        // weeksType(n, o) {
        //     if (n) {
        //         this.updateCourses("weeksType", n);
        //     }
        // },
        compulsory(n, o) {
            if (n) {
                this.updateCourses("compulsory", n);
            }
        }
    }
};
</script>

<style scoped lang="scss">
.btn-container {
    display: flex;
    justify-content: space-between;
    margin: 16px 0;
}
.title-left {
    margin-right: 20px;
}
::v-deep  .course-card{
    &.el-card {
        border: 0;
    }
    .el-card__body {
        padding: 0 !important;
    }
}
</style>
